<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>搜索</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/search.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<script src="js/html5shiv.min.js"></script>
	<script src="js/flexible.debug.js"></script>
	<script src="js/flexible_css.debug.js"></script>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/swiper.jquery.min.js"></script>
</head>
<body>
	<header class="search_header">
		<span class="search_back"><a href=""><img src="img/fanhui@2x.png"></a></span>
		<span>搜索</span>
		<span></span>
	</header>
	<section class="search_search">
		<span class="input_list">宝贝</span><input type="search" placeholder="搜索" class="search_list">
		<ul class="datalist">
		  <li>宝贝</li>
		  <li>店铺</li>
		  <li>胖虎</li>
		</ul>
	</section>
	<section class="search_history">
		<figure class="history_search">历史搜索</figure>
		<figure class="delete_history search_clear">清除历史记录</figure>
	</section>
	<section class="history_content">
		
	</section>
	<section class="search_history">
		<figure class="history_search">热门搜索</figure>
		<figure class="delete_history search_change">换一换</figure>
	</section>
	<section class="hot_content">
		
	</section>

	<script type="text/javascript">
		$(function(){
			$('.input_list').click(function(){
				$('.datalist').show();
			})
			$('.datalist li').click(function(){
				$('.input_list').html($(this).html());
				$('.datalist').hide();
			})
			$('.search_list').keyup(function(e){
				var search_val = $('.search_list').val();
				if(e.keyCode == 13 &&  search_val!= ''){
					var search_data = localStorage.getItem('search_data');
					if(search_data){
						search_data = JSON.parse(search_data);
						search_data.push(search_val);
						localStorage.setItem('search_data', JSON.stringify(search_data));
					}else{
						localStorage.setItem('search_data', JSON.stringify([search_val]))
					}
					$('.history_content').append('<span>' + search_val + '</span>');
					$('.search_list').val('');
				}
			})
			var search_data = localStorage.getItem('search_data');
			if(search_data){
				search_data = JSON.parse(search_data);
				var content = '';
				$.each(search_data,function(i,v){
					content += '<span>' + v + '</span>';
				})
				$('.history_content').append(content);
			}

			var arr = ['普拉达','万国','尊达','爱马仕','伯爵','女包','宝格丽','雷达','古奇','香奈儿','迪奥','纪梵希','香奶奶'],
				new_arr = [];
			while(new_arr.length<8){
				var num = Math.floor(Math.random()*arr.length);
				if(new_arr.indexOf(arr[num]) == -1){
					new_arr.push(arr[num])
				}
			}
			var str = '';
			$.each(new_arr,function(i,v){
				str += '<span>' + v + '</span>';
			})
			$('.hot_content').append(str);
			$('.search_change').click(function(){
				var newArr = [];
				while(newArr.length<8){
				var num = Math.floor(Math.random()*arr.length);
				if(newArr.indexOf(arr[num]) == -1){
					newArr.push(arr[num])
				}
				var str = '';
				$.each(newArr,function(i,v){
					str += '<span>' + v + '</span>';
				})
				$('.hot_content').html(str);
			}
			
			})
			$('.search_clear').click(function(){
				localStorage.clear();
				$('.history_content').html('');
			})
			$('.search_back').click(function(){
				window.history.back();
			})
		})
	</script>
</body>
</html>